<template>
	<el-main class="bg table_wrap">
		<el-form label-position="right" :model="query" class="form p_4" label-width="120">
			<el-row>
				<el-col :xs="24" :sm="10" :lg="8" class="el_form_search_wrap">
					<el-form-item label="留言标题">
						<el-input v-model="query.title"></el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="10" :lg="8" class="el_form_search_wrap">
					<el-form-item label="邮箱">
						<el-input v-model="query.email"></el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="10" :lg="8" class="el_form_search_wrap">
					<el-form-item label="处理状态">
						<el-select v-model="query.is_processed" placeholder="请选择">
							<el-option label="全部" value=""></el-option>
							<el-option label="未处理" :value="0"></el-option>
							<el-option label="已处理" :value="1"></el-option>
						</el-select>
					</el-form-item>
				</el-col>

				<el-col :xs="24" :sm="24" :lg="24" class="search_btn_wrap">
					<el-col :xs="24" :sm="12" :lg="12" class="search_btn_1">
						<el-form-item>
							<el-button type="primary" @click="search()" class="search_btn_find">查询</el-button>
							<el-button @click="reset()" class="search_btn_reset">重置</el-button>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :lg="12" class="search_btn_2">
						<el-form-item>
							<el-button v-if="user_group == '管理员' || $check_action('/feedback/table','del')" class="float-right search_btn_del" type="danger" @click="delInfo()">删除</el-button>
						</el-form-item>
					</el-col>
				</el-col>
			</el-row>
		</el-form>

		<el-table border :data="list" @selection-change="selectionChange" @sort-change="$sortChange" style="width: 100%" stripe>

			<!-- 多选按钮 -->
			<el-table-column fixed type="selection" tooltip-effect="dark" width="55">
			</el-table-column>
			<!-- /多选按钮 -->

			<el-table-column fixed label="留言标题" prop="title" sortable width="200">
			</el-table-column>

			<el-table-column label="邮箱" prop="email" sortable width="200">
			</el-table-column>

			<el-table-column label="留言内容" prop="content" min-width="300" show-overflow-tooltip>
			</el-table-column>

			<el-table-column label="处理状态" prop="is_processed" sortable width="120">
				<template slot-scope="scope">
					<el-tag :type="scope.row.is_processed == 1 ? 'success' : 'warning'">
						{{ scope.row.is_processed == 1 ? '已处理' : '未处理' }}
					</el-tag>
				</template>
			</el-table-column>

			<el-table-column label="处理备注" prop="process_remark" min-width="200" show-overflow-tooltip>
			</el-table-column>

			<el-table-column sortable prop="create_time" label="创建时间" min-width="200">
			    <template slot-scope="scope">
			        {{ $toTime(scope.row["create_time"],"yyyy-MM-dd hh:mm:ss") }}
			    </template>
			</el-table-column>

			<!-- 操作 -->
			<el-table-column fixed="right" label="操作" width="150">
				<template slot-scope="scope">
					<router-link class="el-button el-button--small is-plain el-button--primary"
						:to="'./view?' + field + '=' + scope.row[field]" size="small">
            详情
					</router-link>
					<el-button v-if="scope.row.is_processed == 0" class="el-button el-button--small is-plain el-button--success ml-2"
						@click="markAsProcessed(scope.row)" size="small">
            标记已处理
					</el-button>
				</template>
			</el-table-column>
			<!-- /操作 -->

		</el-table>

		<!-- 分页器 -->
		<div class="mt text_center">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="query.page"
			 :page-sizes="[7, 10, 30, 100]" :page-size="query.size" layout="total, sizes, prev, pager, next, jumper" :total="count">
			</el-pagination>
		</div>
		<!-- /分页器 -->

	</el-main>
</template>

<script>
	import mixin from "@/mixins/page.js";

	export default {
		mixins: [mixin],
		data() {
			return {
				// 表
				table:"feedback",

				// 获取数据地址
				url_get_list: "~/api/feedback/get_list?like=0",
				url_del: "~/api/feedback/del?",

				// 字段ID
				field:"feedback_id",

				// 查询
				query: {
					title: '',
					email: '',
					is_processed: '',
					size: 10,
					page: 1,
				},
			};
		},
		methods: {
			/**
			 * 标记为已处理
			 */
			markAsProcessed(row) {
				this.$post("~/api/feedback/set?feedback_id=" + row.feedback_id, {
					is_processed: 1,
					process_remark: '已处理'
				}, (res) => {
					if (res.result) {
						this.$toast('标记成功', 'success');
						this.search();
					} else if (res.error) {
						this.$toast(res.error.message, 'danger');
					}
				});
			}
		}
	};
</script>

<style scoped>
.ml-2 {
	margin-left: 0.5rem;
}
</style>

